<template>
	<view class="relevent">
		<view class="layout contact">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe61a;</span>
					<view class="topic">
						联系人
					</view>
				</view>
				<view class="right" @click="createContact">+新建</view>
			</view>
			<view class="container">
				<empty v-if="contactEmpty" desc="暂无联系人" height="300"></empty>
				<view v-else class="contact-list">
					<view class="item" v-for="item in contactList" :key="item.id">
						<view class="message">
							<view class="name">
								{{item.name || ''}}
							</view>
							<view class="phone">
								手机号码:{{item.mobile || ''}}
							</view>
						</view>
						<view class="post">
							<view class="key" v-if="item.post">
								{{item.post}}
							</view>
							<view class="value">
								{{item.master ? '关键决策人' : '非关键决策人'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout invoicing">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xeb22;</span>
					<view class="topic">
						开票信息
					</view>
				</view>
				<navigator :url="'/pages/index/customer/createInvoicing?id=' + customerId + '&name=' + name" class="right" hover-class="none">+新建</navigator>
			</view>
			<view class="container">
				<empty v-if="invoiceEmpty" desc="暂无开票信息" height="300"></empty>
				<view class="invoicing-list">
					<view class="item" v-for="item in invoiceList" :key="item.id">
						<view class="message">
							<view class="name">
								{{item.companyName}}
							</view>
							<view class="phone">
								税号：{{item.dutyParagraph}}
							</view>
						</view>
						<view class="post">
							<view class="value">
								{{item.requirementText}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout project">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe64b;</span>
					<view class="topic">
						项目
					</view>
				</view>
				<navigator :url="'/pages/index/project/createProject?customerId=' + customerId" class="right" hover-class="none">+新建</navigator>
			</view>
			<view class="container">
				<empty v-if="projectEmpty" desc="暂无项目" height="300"></empty>
				<view v-else class="project-list">
					<view class="item" v-for="item in projectList" :key="item.id">
						<view class="top">
							<view class="title">
								{{item.name}}
							</view>
							<view class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
								{{item.statusText}}
							</view>
						</view>
						<view class="bottom">
							<view class="bot-item max">
								项目编号：{{item.projectNo || ''}}
							</view>
							<view class="bot-item">
								项目类型：{{item.typeText}}
							</view>
							<view class="bot-item">
								项目等级：{{item.levelText}}
							</view>
							<view class="bot-item">
								当前阶段：{{item.stageText}}
							</view>
							<view class="bot-item">
								创建时间：{{$share.getDate(item.createTime)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout project">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe6ed;</span>
					<view class="topic">
						合同
					</view>
				</view>
				<navigator :url="`/pages/index/agreement/create?id=${customerId}&type=customer`" class="right" hover-class="none">+新建</navigator>
				</view>
				<view class="container">
					<empty v-if="contractEmpty" desc="暂无合同" height="300"></empty>
					<view class="project-list">
						<navigator :url="`/pages/index/agreement/details?id=${item.id}`" hover-class="none" class="item" v-for="item in contractList" :key="item.id">
							<view class="top">
								<view class="title">
									{{item.name}}
								</view>
								<view v-if="item.auditStatus == 30" class="tag" :style="{color: `#bd3124`, borderColor: `#bd3124`}">
									不通过
								</view>
								<view v-else class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
									{{item.statusText}}
								</view>
							</view>
							<view class="bottom">
								<view class="bot-item max">
									合同编号：{{item.no}}
								</view>
								<view class="bot-item">
									合同金额：￥{{item.totalPrice}}
								</view>
								<view class="bot-item">
									回款率：{{item.totalPrice ? (item.totalReceivablePrice/item.totalPrice).toFixed(2) * 100 : 0}}%
								</view>
								<view class="bot-item">
									签约时间：{{$share.getDate(item.orderDate)}}
								</view>
								<view class="bot-item">
									创建时间：{{$share.getDate(item.createTime)}}
								</view>
							</view>
						</navigator>
					</view>
				</view>
		</view>
		<view class="layout project">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe627;</span>
					<view class="topic">
						回款
					</view>
				</view>
				<navigator :url="`/pages/index/paymentCollection/create?params=${JSON.stringify(params)}`" class="right" hover-class="none">+新建</navigator>
			</view>
			<view class="container">
				<empty v-if="paymentEmpty" desc="暂无回款记录" height="300"></empty>
				<view class="project-list">
					<navigator :url="`/pages/index/paymentCollection/details?id=${item.id}`" class="item" v-for="item in paymentList" :key="item.id" hover-class="none">
						<view class="top">
							<view class="title">
								回款编号：{{item.no}}
							</view>
							<view class="tag" :style="{color: `${item.color}`, borderColor: `${item.color}`}">
								{{item.statusText}}
							</view>
						</view>
						<view class="bottom">
							<view class="bot-item max">
								合同编号：{{item.contract.no}}
							</view>
							<view class="bot-item">
								回款金额：￥{{item.price}}
							</view>
							<view class="bot-item">
								汇款方式：{{item.type}}
							</view>
							<view class="bot-item">
								回款时间：{{$share.getDate(item.returnTime)}}
							</view>
							<view class="bot-item">
								创建时间：{{$share.getDate(item.createTime)}}
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe660;</span>
					<view class="topic">
						附件
					</view>
				</view>
				<view class="right" @click="uploade">
					+上传
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<empty v-if="resourceEmpty" desc="暂无项目资料" height="300"></empty>
					<view class="file-item" v-for="(item, index) in resourceList" :key="index" @click="openFile(item.url)">
						{{index + 1}}.{{item.url.split('.').pop()}}
						<view class="close" @click.stop="deleteFile(item.id)">
							<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout recode">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe680;</span>
					<view class="topic">
						操作记录
					</view>
				</view>
			</view>
			<view class="container">
				<empty v-if="operateEmpty" desc="暂无记录" height="300"></empty>
				<view v-else class="recode-container">
					<view class="recode-list" v-for="item in operateList" :key="item.id">
						<view class="item">
							<view class="info">
								<view class="user">
									<view class="circle"></view>
									<view class="avatar">
										<image src="@/static/images/avatar.png" mode="aspectFill"></image>
									</view>
									<view class="name">
										{{item.userName}}
									</view>
								</view>
								<view class="time">
									{{$share.getTime(item.createTime)}}
								</view>
							</view>
							<view class="action">
								{{item.subType}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getContactApi} from "@/api/common.js";
	import {getProjectListApi} from "@/api/project_api.js";
	import {getInvoiceApi} from "@/api/customer_api.js";
	import {getAgreementListApi} from "@/api/agreement_api.js";
	import {getPaymentListApi} from "@/api/paymentCollection_api.js";
	import empty from "@/components/empty.vue";
	export default {
		components:{
			empty
		},
		props: {
			customerId: Number,
			name: String
		},
		data(){
			return {
				contactEmpty: false,//联系人是否为空
				contactList: [], //联系人列表
				invoiceEmpty: false,
				invoiceList: [],
				projectEmpty: false,
				projectList: [],
				paymentEmpty: false,
				paymentList: [],
				resourceEmpty: false,
				resourceList: [],
				contractEmpty: false,
				contractList: [],
				operateEmpty: false,
				operateList: [],
				params: {
					type: 'customer',
					customerId: this.customerId
				}
			}
		},
		async mounted() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			await this.getContact();
			await this.getProjectList();
			await this.getInvoice();
			await this.getAgreementList();
			await this.getPaymentList();
			let resource = await this.$share.getResourceList(this.customerId, 2);
			this.resourceEmpty = resource.empty;
			this.resourceList = [...resource.resourceList];
			let operate = await this.$share.getOperateList(this.customerId, 'CRM 客户');
			this.operateEmpty = operate.empty;
			this.operateList = [...operate.list];
		},
		methods: {
			// 获得联系人
			async getContact() {
				this.contactEmpty = false;
				let res = await getContactApi(this.customerId).catch(() => {
					this.contactEmpty = true;
					return Promise.reject();
				}).catch(() => {
					this.contactEmpty = true;
					uni.hideLoading();
					return Promise.reject();
				})
				this.contactList = res.data.list;
				if(this.contactList.length == 0){
					this.contactEmpty = true;
				}
				await uni.hideLoading();
			},
			// 新建联系人
			createContact(){
				uni.navigateTo({
					url:`/pages/index/contact/createContact?customerId=${this.customerId}`
				})
			},
			// 获得开票信息
			async getInvoice(){
				this.invoiceEmpty = false;
				let res = await getInvoiceApi(this.customerId).catch(() => {
					this.invoiceEmpty = true;
					uni.hideLoading();
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let requirementText = '';
					switch(item.requirement){
						case 0:{
							requirementText = '优先专票';
							break;
						}
						case 1:{
							requirementText = '优先普票';
							break;
						}
						case 2:{
							requirementText = '无要求';
							break;
						}
					}
					return{
						...item,
						requirementText
					}
				})
				this.invoiceList = [...res.data.list];
				if(res.data.total == 0){
					this.invoiceEmpty = true;
				}
				await uni.hideLoading();
			},
			// 获取项目列表
			async getProjectList(){
				this.projectEmpty = false;
				let res = await getProjectListApi({
					customerId: this.customerId,
				}).catch(() => {
					this.projectEmpty = true;
					uni.hideLoading();
					return Promise.reject();
				})
				// date.toLocaleString('zh-CN', { hour12: false }).replace(/\//g,'-');
				res.data.list = res.data.list.map((item) => {
					let typeText = '';
					let levelText = '';
					let statusText = '';
					let color = '';
					let stageText = ''
					switch(item.type){
						case 0: {
							typeText = '产品开发类';
							break;
						}
						case 1: {
							typeText = '运维服务类';
							break;
						}
						case 2: {
							typeText = '设备销售类';
							break;
						}
					}
					switch(item.level){
						case 0: {
							levelText = 'A（重要）';
							break;
						}
						case 1: {
							levelText = 'B（关注）';
							break;
						}
						case 2: {
							levelText = 'C（一般）';
							break;
						}
					}
					switch(item.status){
						case 0: {
							statusText = '进行';
							color = '#3388FF';
							break;
						}
						case 1: {
							statusText = '暂停';
							color = '#DE868F';
							break;
						}
						case 2: {
							statusText = '作废';
							color = '#C9C9C9';
							break;
						}
						case 3: {
							statusText = '正常完结';
							color = '#3BBF03';
							break;
						}
						case 4: {
							statusText = '异常完结';
							color = '#951D1D';
							break;
						}
					}
					switch(item.stage){
						case 0: {
							stageText = '意向';
							break;
						}
						case 1: {
							stageText = '签约';
							break;
						}
						case 2: {
							stageText = '实施';
							break;
						}
						case 3: {
							stageText = '交付';
							break;
						}
						case 4: {
							stageText = '回款';
							break;
						}
						case 5: {
							stageText = '归档';
							break;
						}
					}
					return{
						...item,
						typeText,
						levelText,
						statusText,
						color,
						stageText
					}
				})
				this.projectList = [...res.data.list];
				if(res.data.total == 0){
					this.projectEmpty = true;
				}
				await uni.hideLoading();
			},
			// 获得回款列表
			async getPaymentList(){
				this.paymentEmpty = false;
				let res = await getPaymentListApi({
					customerId: this.customerId
				}).catch(() => {
					this.paymentEmpty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = "";
					let color = "";
					let type = '';
					switch(item.status){
						case 0: {
							statusText = "待审核";
							color = "#f6d7ab";
							break;
						}
						case 1: {
							statusText = "生效";
							color = "#3388FF";
							break;
						}
						case 2: {
							statusText = "审核不通过";
							color = "#bd3124";
							break;
						}
						case 3: {
							statusText = "作废";
							color = "#F44444";
							break;
						}
						default: {
							statusText = "";
							color = ""
							break;
						}
					}
					switch(item.returnType){
						case 1: {
							type = "支票";
							break;
						}
						case 2: {
							type = "现金";
							break;
						}
						case 3: {
							type = "邮政汇款";
							break;
						}
						case 4: {
							type = "电汇";
							break;
						}
						case 5: {
							type = "网上转账";
							break;
						}
						case 6: {
							type = "支付宝";
							break;
						}
						case 7: {
							type = "微信支付";
							break;
						}
						case 8: {
							type = "其他";
							break;
						}
						default: {
							type = "暂无";
							break;
						}
					}
					return {
						...item,
						statusText,
						color,
						type
					}
				})
				this.paymentList = [...res.data.list];
				if(res.data.total == 0){
					this.paymentEmpty = true;
				}
			},
			// 上传项目资料
			uploade(){
				wx.chooseMessageFile({
				  count: 1,
				  type: 'file',
				  success: async (res) => {
						let data = await this.$share.uploade(this.customerId, 2, res.tempFiles[0].path);
						if(data){
							uni.showLoading({
								mask: true,
								title: '加载中...'
							})
							let resource = await this.$share.getResourceList(this.customerId, 2);
							this.resourceEmpty = resource.empty;
							this.resourceList = [...resource.resourceList];
						}
				  }
				})
			},
			// 预览文件
			openFile(file){
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			},
			// 删除文件
			async deleteFile(id){
				let data = await this.$share.deleteFile(id);
				if(data){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					let resource = await this.$share.getResourceList(this.customerId, 2);
					this.resourceEmpty = resource.empty;
					this.resourceList = [...resource.resourceList];
				}
			},
			// 获取合同列表
			async getAgreementList(){
				this.contractEmpty = false;
				let res = await getAgreementListApi({
					customerId: this.customerId
				}).catch(() => {
					uni.hideLoading();
					this.contractEmpty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let statusText = "";
					let color = "";
					switch(item.status){
						case 0: {
							statusText = "审批中";
							color = "#f6d7ab";
							break;
						}
						case 1: {
							statusText = "生效";
							color = "#3388FF";
							break;
						}
						case 2: {
							statusText = "作废";
							color = "#F44444";
							break;
						}
						case 3: {
							statusText = "履行完毕";
							color = "#3BBF03";
							break;
						}
					}
					return {
						...item,
						statusText,
						color
					}
				})
				this.contractList = [...this.contractList, ...res.data.list];
				if(res.data.total == 0){
					this.contractEmpty = true;
				}
				uni.hideLoading();
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.relevent {
		padding: 28rpx;

		.layout {
			@include box;
			margin: 0 0 18rpx;

			.header {
				padding: 18rpx 28rpx;
				@include flex-r-between-center;
				border-bottom: 4rpx #f7f7f7 solid;

				.left {
					@include flex-r-start-center;

					.icon {
						color: #101010;
						font-size: 38rpx;
						font-weight: bold;
					}

					.topic {
						padding-left: 8rpx;
						color: #000;
						font-size: 28rpx;
					}
				}

				.right {
					color: #4095E5;
					font-size: 24rpx;
				}
			}

			.container {
				padding: 0 28rpx;
			}
		}

		.contact {
			.container {
				.contact-list {
					padding: 0 0 16rpx;

					.item {
						@include flex-r-between-start;
						padding: 20rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;

						&:last-child {
							border-bottom: none;
						}

						.message {
							.name {
								font-size: 26rpx;
								color: #000;
							}

							.phone {
								font-size: 24rpx;
								color: #9A9A9A;
								padding: 10rpx 0 0;
							}
						}

						.post {
							@include flex-r;

							.key,
							.value {
								color: #fff;
								font-size: 20rpx;
								height: 30rpx;
								line-height: 30rpx;
								border-radius: 4rpx 20rpx 20rpx 4rpx;
								text-align: center;
							}

							.key {
								padding: 0 20rpx;
								background-color: #3BBF03;
								margin-right: 30rpx;
							}

							.value {
								width: 140rpx;
								background-color: #3388FF;
							}
						}
					}
				}
			}
		}

		.invoicing {
			.container {
				.invoicing-list {
					padding: 0 0 16rpx;

					.item {
						@include flex-r-between-start;
						padding: 20rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;

						&:last-child {
							border-bottom: none;
						}

						.message {
							.name {
								font-size: 26rpx;
								color: #000;
							}

							.phone {
								font-size: 24rpx;
								color: #9A9A9A;
								padding: 10rpx 0 0;
							}
						}

						.post {
							@include flex-r;

							.value {
								color: #fff;
								font-size: 20rpx;
								height: 30rpx;
								line-height: 30rpx;
								border-radius: 4rpx 20rpx 20rpx 4rpx;
								padding: 0 10rpx;
								background-color: #3388FF;
							}
						}
					}
				}
			}
		}

		.project {
			.container {
				.project-list {
					padding: 0 0 6rpx;

					.item {
						padding: 16rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;

						&:last-child {
							border-bottom: none;
						}

						.top {
							@include flex-r-between-center;
							padding: 0 0 10rpx;

							.title {
								color: #000;
								font-size: 26rpx;
							}

							.tag {
								min-width: 80rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #3BBF03;
								font-size: 20rpx;
								padding: 0 15rpx;
								border-radius: 4rpx;
								border: 2rpx #3BBF03 solid;
							}
						}

						.bottom {
							@include flex-r-wrap;

							.bot-item {
								width: 50%;
								color: #9A9A9A;
								font-size: 24rpx;
								padding: 0 0 10rpx;
							}

							.max {
								width: 100%;
							}
						}
					}
				}
			}
		}

		.files {
			.container {
				.file-list {
					padding: 18rpx 0;

					.file-item {
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						border-radius: 6rpx;
						background-color: #F3F6F9;
						color: #101010;
						font-size: 28rpx;
						margin-bottom: 10rpx;
						position: relative;

						.close {
							position: absolute;
							top: 0;
							right: 10rpx;
						}
					}
				}
			}
		}

		.recode {
			.container {
				.recode-container {
					padding: 26rpx 0 0;

					.recode-list {

						&:last-child{
							.item{
								.action{
									border: none;
								}
							}
						}
						.item{
							.info{
								@include flex-r-between-center;
								.user{
									@include flex-r-start-center;
									.circle{
										@include circle(16);
										background-color: #6C6C6C;
										margin-right: 36rpx;
									}
									.avatar{
										@include avatar(56);
									}
									.name{
										font-size: 26rpx;
										color: #000;
										padding-left: 30rpx;
									}
								}
								.time{
									font-size: 26rpx;
									color: #9A9A9A;
								}
							}
							.action{
								min-height: 62rpx;
								color: #000;
								font-size: 26rpx;
								padding-left: 124rpx;
								border-left: 4rpx #6C6C6C solid;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>